﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <link rel="stylesheet" href="/sitefiles/assets/css/github-markdown.css">
  <style>
    .el-card__body .el-form-item {
      margin-bottom: 5px;
    }
  </style>
}

<el-form :inline="true" size="mini">
  <el-form-item label="关键字">
    <el-input v-model="keyword" placeholder="请输入关键字..."></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" v-on:click="btnSearchClick">搜索插件</el-button>
    <el-button size="mini" type="primary" plain style="margin-left: 0px;" icon="el-icon-upload" v-on:click="btnUploadClick">
      离线安装
    </el-button>
  </el-form-item>
</el-form>

<template v-if="q">
  <div style="margin-bottom: 10px;" v-if="plugins && plugins.length > 0">搜索到 {{plugins.length}} 个结果</div>
  <div style="margin-bottom: 10px;" v-else>未找到搜索结果，建议更换搜索词</div>
</template>

<el-row>
  <el-col :span="6" v-for="(plugin, index) in plugins" :key="plugin.pluginId">
    <el-card style="margin-bottom: 15px; margin-right: 15px;">
      <div slot="header" class="clearfix">
        <span>
          <el-link :underline="false" type="primary" v-on:click="btnViewClick(plugin)">
            {{ plugin.title }}
          </el-link>
        </span>
      </div>
      <div style="text-align: center;">
        <el-link :underline="false" type="primary" v-on:click="btnViewClick(plugin)">
          <el-badge :value="packageIds.indexOf(plugin.pluginId) !== -1 ? '已安装' : '未安装'" :type="packageIds.indexOf(plugin.pluginId) !== -1 ? 'primary' : 'info'">
            <el-image 
              style="width: 150px; height: 150px; cursor: pointer; margin: 10px"
              :src="getIconUrl(plugin.iconUrl)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-badge>
        </el-link>
      </div>
      <el-form size="mini" label-width="70px">
        <el-form-item label="插件Id">
          <el-link :underline="false" type="primary" v-on:click="btnViewClick(plugin)">
            {{ plugin.pluginId }}
          </el-link>
        </el-form-item>
        <el-form-item label="最新版本">
          {{ getLatestVersion(plugin) }}
        </el-form-item>
        <el-form-item label="更新时间">
          {{ getLatestPublished(plugin) }}
        </el-form-item>
        <el-form-item label="标签">
          <span v-for="tagName in getTagNames(plugin)" style="margin-right: 2px;">{{ tagName }}</span>
        </el-form-item>
      </el-form>
      <div :title="plugin.summary" class="cell" style="font-size: 14px; text-align: left; overflow-y: hidden; height: 15px;; height: 35px; overflow: hidden">
        {{ plugin.summary }}
      </div>
    </el-card>
  </el-col>
</el-row>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/plugins/add.js" type="text/javascript"></script>
}